<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios发送Ajax请求</title>
    <script src="./axios.js"></script>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script>

    //配置baseURL
    axios.defaults.baseURL = 'http://localhost:8000'
    const btn = document.querySelectorAll('button')

    btn[0].addEventListener('click', function () {
        //GET 第一个参数为url,第二个参数为其他
        axios.get('/axios-server', {
            //url参数
            params: {
                id: 100,
                vip: 7
            },
            //请求头信息
            headers: {
                name: 'zyj',
                age: 20
            },
        }).then(value => {
            console.log(value)
        })
    })


    btn[1].addEventListener('click', function () {
        //POST 第一个参数为url 第二个参数为请求体  第三个参数为其他
        axios.post('/axios-server', {
                //请求体信息
                username: 'admin',
                password: '123456'
            },
            {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    height: 189,
                    weight: 189
                }

            }).then(value => {
            console.log(value)
        })
    })


    btn[2].addEventListener('click', function () {
        //通用方式发送请求
        axios({
            //请求方式
            method: 'POST',
            // url
            url: '/axios-server',
            //url参数
            params: {
                vip: 10,
                level: 100
            },
            //头信息
            headers: {
                width: 189,
                height: 189
            },
            //请求体参数
            data: {
                username: 'admin',
                password: '123456'
            }

        }).then(response => {
            console.log(response)
            //响应状态码
            console.log(response.status)
            //   响应状态字符串
            console.log(response.statusText)
            //   响应头信息
            console.log(response.headers)
            //   响应体信息
            console.log(response.data)
        })
    })
</script>
</body>
</html>